<template>
  <div class="list-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <nav class="nav-container">
        <div class="nav-left">
          <button class="back-btn" @click="goBack">
            <span class="back-icon">←</span>
            返回
          </button>
          <h1 class="page-title">新闻列表</h1>
        </div>
      </nav>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="list-wrapper" v-if="!loading">
        <div v-if="newsList.length === 0" class="empty-state">
          <div class="empty-icon">📰</div>
          <p class="empty-text">暂无新闻信息</p>
        </div>
        
        <div v-else class="items-grid">
          <div 
            v-for="news in newsList" 
            :key="news.id" 
            class="list-item"
            @click="handleItemClick(news)"
          >
            <div class="item-header">
              <h3 class="item-title">{{ news.title }}</h3>
              <span class="item-date">{{ formatDate(news.publishTime) }}</span>
            </div>
            
            <div class="item-content">
              <p class="item-summary">{{ news.summary || news.content }}</p>
            </div>
            
            <div class="item-footer">
              <span class="item-type">新闻</span>
              <div class="item-meta">
                <span class="item-author" v-if="news.author">{{ news.author }}</span>
                <span class="item-views" v-if="news.viewCount">{{ news.viewCount }} 阅读</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAllNewsService } from '@/api/home.js'

const router = useRouter()
const newsList = ref([])
const loading = ref(true)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 点击项目
const handleItemClick = (news) => {
  router.push(`/news-detail/${news.id}`)
}

// 加载新闻列表
const loadNewsList = async () => {
  try {
    loading.value = true
    const result = await getAllNewsService()
    if (result.code === 200 && result.data) {
      // 后端返回的是分页数据，需要取list字段
      newsList.value = result.data.list || []
    }
  } catch (error) {
    console.error('加载新闻列表失败:', error)
    newsList.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadNewsList()
})
</script>

<style scoped lang="scss">
@import '@/assets/css/news-list.css';
</style> 